<template>
	<view class="main">
		<view class="block1">
			<view>
				<icon type="success" size="80" color="#006EFF"/>
			</view>
			<view class="text">缴费成功</view>
		</view>
		<view class="block2">
			<view class="item">
				<text class="itemText">费用类型</text>
				<text>{{arr.desc}}</text>
			</view>
			<view class="item">
				<text class="itemText">就诊科室</text>
				<text>{{arr.keShi}}</text>
			</view>
			<view class="item">
				<text class="itemText">医生姓名</text>
				<text>{{arr.name}}</text>
			</view>
			<view class="item">
				<text class="itemText">就&nbsp;诊&nbsp;人</text>
				<text>{{dataList[0].patients_name}}</text>
			</view>
			<view class="item">
				<text class="itemText">就诊卡号</text>
				<text>{{dataList[0].card_number}}</text>
			</view>
		</view>
		<view class="block2">
			<view class="itemText2">费用明细</view>
			<view>
				<view class="section">
					<view>
						<view>普罗布考片</view>
						<view class="sectionItem">
							<text>单价：￥<text>50.00</text></text>
							<text class="num">数量：<text>3</text></text>
						</view>
					</view>
					<view>￥<text>150</text></view>
				</view>
				<view class="section">
					<view>
						<view>阿司匹林肠溶片</view>
						<view class="sectionItem">
							<text>单价：￥<text>50.00</text></text>
							<text class="num">数量：<text>3</text></text>
						</view>
					</view>
					<view>￥<text>150</text></view>
				</view>
			</view>
		</view>
		<view class="block2">
			<view class="item">
				<text class="itemText">支付方式</text>
				<text>余额</text>
			</view>
			<view class="item">
				<text class="itemText">卡内余额</text>
				<text>1400.00<text>元</text></text>
			</view>
			<view class="item">
				<text class="itemText">订单总额</text>
				<text class="money">{{arr.price}}<text>元</text></text>
			</view>
			<view class="item">
				<text class="itemText">订单编号</text>
				<text>202010090900001</text>
			</view>
			<view class="item">
				<text class="itemText">订单时间</text>
				<text>2020/10/09 09:00:00</text>
			</view>
			<view class="item">
				<text class="itemText">订单状态</text>
				<text>已支付</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {onLoad} from '@dcloudio/uni-app'
	export default {
		data(){
			return{
				dataPay:[],
				arr:[],
				dataList:[]
			}
		},
		methods:{
			
		},
		created(){
			this.dataPay=uni.getStorageSync('dataPay');
			console.log(this.dataPay);
			this.dataList=uni.getStorageSync('dataList3')
			console.log(this.dataList); 
		},
		onLoad(option) {
			console.log(option);
			this.dataPay.forEach((item)=>{
				if(item.id==option.id){
					this.arr=item
				}
			})
			console.log(this.arr);
		}
	}
</script>

<style>
.main{
	padding: 30rpx;
	box-sizing: border-box;
}
.block1{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 30rpx;
}
.text{
		font-size: 40rpx;
		padding: 20rpx;
		box-sizing: border-box;
}
.block2{
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow:  1px 2px 2px 1px rgba(0, 0, 0, 0.2);
	padding: 0 20rpx;
	box-sizing: border-box;
	margin-bottom: 30rpx;
}
.item{
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	padding-bottom: 30rpx;
	padding-top: 30rpx;
	box-sizing: border-box;
}
.itemText{
	color: rgba(0, 0, 0, 0.5);
	padding-right: 30rpx;
	box-sizing: border-box;
}
.money{
	color: coral;
}
.itemText2{
	color: rgba(0, 0, 0, 0.5);
	padding: 30rpx 0;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(0, 0,0,0.2);
}
.section{
	padding: 30rpx 0;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.sectionItem{
	color: rgba(0, 0, 0, 0.5);
	padding-top: 20rpx;
	box-sizing: border-box;
}
.num{
	padding-left: 30rpx;
	box-sizing: border-box;
}
</style>
